import React, { Component } from 'react'
import { connect } from 'react-redux'
import { 
  SpecialWrapper,
  SpecialItem,
  ItemImg,
  ItemHeader,
  HeaderTitle,
  HeaderInfo,
  HeaderBtn,
  ItemContentList,
  ContentItem,
  ContentItemTag
} from '../style'

class Special extends Component {
  render() {
    const { specialList } = this.props
    return (
      <SpecialWrapper>
        {
          specialList.map(item => {
            return (
              <SpecialItem key={item.get('id')}>
                <ItemImg>
                  <img src={item.get('imgUrl')} alt='img'/>
                </ItemImg>
                <ItemHeader>
                  <div>
                    <HeaderTitle>{item.get('title')}</HeaderTitle>
                    <HeaderInfo>
                      <span className='time'>{item.get('time')} 小时前更新</span>·<span className='count'>{item.get('peopleCount')} 浏览</span>
                    </HeaderInfo>
                  </div>
                  <HeaderBtn>关注专题</HeaderBtn>
                </ItemHeader>
                <ItemContentList>
                  {
                    item.get('contentList').map(item => {
                      return (
                        <ContentItem key={item.get('id')}>
                          <ContentItemTag>{item.get('tag')}</ContentItemTag>
                          <p className='item-desc'>{item.get('desc')}</p>
                        </ContentItem>
                      )
                    })
                  }
                </ItemContentList>
              </SpecialItem>
            )
          })
        }
      </SpecialWrapper>
    )
  }
}

const mapState = (state) => {
  return {
    specialList: state.getIn(['explore', 'specialList'])
  }
}

export default connect(mapState, null)(Special)